import React, { useEffect, useMemo, useState } from 'react'
import '../css/Collect.scss'
import { NavBar, Tabs, Card } from '@nutui/nutui-react'
import { Checkbox } from 'antd-mobile'
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
// 收藏列表
export default function Collect() {
  let navigate = useNavigate()
  let [tab1value, setTab1value] = useState(0)
  let userId = localStorage.getItem('userId')
  let [collect, setcollect] = useState([])
  let getcollect = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/users/collect?userId=${userId}&tab=${tab1value}`)
    if (data.data.code == 200) {
      setcollect(data.data.data)
    }
  }
  const [value, setValue] = useState([])
  let [isdel, setisdel] = useState(false)
  let delcollect = async()=>{
    let list = []
    value.forEach(item=>list.push(item._id))
    let data = await axios.delete(`http://127.0.0.1:3000/users/collect?ids=${list}&userId=${userId}&tab=${tab1value}`)
    if(data.data.code==200){
      getcollect()
    }
  }
  useEffect(()=>{
    getcollect()
    setValue([])
    setisdel(false)
  },[tab1value])
  
  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => setisdel(!isdel)}>
            {isdel ? '取消' : '管理'}
          </span>
        }
        onBackClick={(e) => navigate('/show/mine')}
      >
        我的收藏
      </NavBar>

      <Tabs
        value={tab1value}
        onChange={(value) => {
          setTab1value(value)
        }}
      >
        <Tabs.TabPane title="商品">
          <Checkbox.Group
            value={value}
            onChange={v => {
              setValue([...v])
            }}
          >
            {collect.map(item => (
              <div key={item._id} style={{ display: 'flex' }}>
                <Checkbox value={item} style={{ display: isdel ? 'block' : 'none' }}></Checkbox>
                <Card
                  src={item.img}
                  title={item.name}
                  price={item.price}
                  shopDescription={"78包邮"}
                />

              </div>
            ))}

          </Checkbox.Group>
        </Tabs.TabPane>
        <Tabs.TabPane title="店铺"> 
        <Checkbox.Group
            value={value}
            onChange={v => {
              setValue([...v])
            }}
          >
            {collect.map(item => (
              <div key={item._id} style={{ display: 'flex' }}>
                <Checkbox value={item} style={{ display: isdel ? 'block' : 'none' }}></Checkbox>
                <div className="collect_store">
                  <img src={item.src} alt="" />
                  <div>
                    <p>{item.shop}</p>
                    <p>商铺地址：{item.addr}</p>
                    <p>联系电话：{item.tel}</p>
                  </div>
                </div>
              </div>
            ))}

          </Checkbox.Group>
        </Tabs.TabPane>
      </Tabs>

      <div className="collect_floot">
        <Checkbox
         style={{ display: isdel ? 'block' : 'none' }}
          indeterminate={value.length > 0 && value.length < collect.length}
          checked={value.length === collect.length}
          onChange={checked => {
            if (checked) {
              setValue(collect)
            } else {
              setValue([])
            }
          }}
        >
          半选
        </Checkbox>
        <button  style={{ display: isdel ? 'block' : 'none' }} onClick={delcollect}>删除</button>
      </div>

    </div>
  )
}
